<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人中心</title>
  </head>
  <body>
    <!-- multipart多部分表单 文件通过req.files接收 请求体的其它name/key通过req.body -->
    <form action="/user/62eb3c30ad6e2095b8ea917b" method="POST" enctype="multipart/form-data">
      
      <!-- 携带普通表单数据 服务端通过req.body接收 -->
      <!-- express的全局中间件express.urlencoded支持了表单数据的读取 -->
      <input type="text" id="ipUsername" name="username" /><br />
      <input type="text" id="ipPassword" name="password" /><br />

      <!-- 携带上传文件 服务端通过req.files接收-->
      <!-- express的全局中间件multer支持了文件上传 -->
      <input type="file" name="avitar" /><br />

      <img src="/img/default.png" alt="" id="imgAvatar" style="width: 100px" /><br>
      
      <!-- 表单中有唯一按钮的时候 默认具有提交功能 -->
      <button>提交</button>
    </form>

    <!-- 引入ajax.js http://localhost:8002/js/ajax.js-->
    <script src="/js/ajax.js"></script>
    <script>
      // ajax请求获取黑哥的JSON信息
      ajaxPromise({
        url: "/user/62eb3c30ad6e2095b8ea917b",
      })
        .then((data) => {
          /* 从JSON中解构出用户名和密码 */
          console.log("data=", data);
          const { username, password, avatar } = JSON.parse(data);

          /* 将用户名和密码显式在DOM元素身上 */
          ipUsername.value = username;
          ipPassword.value = password;
          imgAvatar.src = avatar;
        })
        .catch((err) => console.log("err=", err));
    </script>
  </body>
</html>
